/* eslint-disable class-methods-use-this */
import React, { Component } from 'react';
import { Table, Button, Icon, Divider, Popconfirm } from 'antd';
import { getPosts, deletePosts } from '@/services/appManage';
import HomeForm from './components/HomeForm';
// import styled from './index.less';

interface IItemData {
  id: number;
  images: string[];
  type: number;
  title: string;
  sort: string;
  status: boolean;
  summary: string;
  content: string;
}

interface IState {
  list: object[];
  columns: object[];
  visible: boolean;
  itemData: IItemData;
  isEdit: boolean;
}

const initItemData = {
  id: -1,
  images: [],
  type: 1,
  title: '',
  sort: '',
  status: true,
  content: '',
  summary: '',
};

export default class index extends Component<any, IState> {
  public readonly state: Readonly<IState> = {
    list: [],
    columns: [
      {
        title: 'id',
        dataIndex: 'id',
        key: 'id',
        width: 100,
        render: (id: number) => (
          <div
            style={{
              width: '100px',
            }}
          >
            <span>{id}</span>
          </div>
        ),
      },
      {
        title: '文章名称',
        key: 'title',
        dataIndex: 'title',
        width: 150,
      },
      {
        title: '文章摘要',
        key: 'summary',
        dataIndex: 'summary',
        width: 280,
        ellipsis: true,
      },
      {
        title: '缩略图展示',
        dataIndex: 'images',
        key: 'images',
        width: 240,
        render: (images: any) => (
          <div
            style={{
              display: 'flex',
            }}
          >
            <img
              style={{
                width: '160px',
                height: '80px',
              }}
              alt=""
              src={images[0]?.url}
            ></img>
            {/* {images.map((item: any) => (
              <img
                style={{
                  width: '160px',
                  height: '80px',
                }}
                alt=""
                src={item.url}
              ></img>
            ))} */}
          </div>
        ),
      },
      // {
      //   title: '是否展示',
      //   key: 'status',
      //   dataIndex: 'status',
      //   render: (status: boolean) => (
      //     <div
      //       style={{
      //         width: '50px',
      //       }}
      //     >
      //       <span>{status ? '展示' : '不展示'}</span>
      //     </div>
      //   ),
      // },
      // {
      //   title: '排序位置（值）',
      //   key: 'sort',
      //   dataIndex: 'sort',
      // },
      {
        title: '创建时间',
        key: 'created_at',
        dataIndex: 'created_at',
      },
      {
        title: '文章类型',
        dataIndex: 'type',
        key: 'type',
        render: (type: number) => (
          <div
            style={{
              width: '100px',
            }}
          >
            <span>{type === 1 ? '图标文章' : '动态文章'}</span>
          </div>
        ),
      },
      {
        title: 'Action',
        key: 'action',
        render: (item: any) => (
          <span>
            {/* <Button
              type="primary"
              size="small"
              onClick={() => {
                this.handlerEdit(item);
              }}
            >
              <Icon type="search" />
            </Button>
            <Divider type="vertical" /> */}
            <Button
              type="primary"
              size="small"
              onClick={() => {
                this.handlerEdit(item);
              }}
            >
              <Icon type="edit" />
            </Button>
            <Popconfirm
              title="确定要删除吗？"
              okText="确定"
              cancelText="取消"
              onConfirm={() => {
                this.handlerDelete(item);
              }}
            >
              <Divider type="vertical" />
              <Button type="danger" size="small">
                <Icon type="delete" />
              </Button>
            </Popconfirm>
          </span>
        ),
      },
    ],
    visible: false,
    itemData: initItemData,
    isEdit: false,
  };

  public componentDidMount() {
    this.getData(this);
  }

  public getData(that: any) {
    getPosts({
      page: 1,
      size: 99,
      type: this.props.location.pathname.split('/').slice(-1)[0] === 'actives' ? 2 : 1,
    }).then(resp => {
      that.setState({
        list: resp.data.data ?? [],
      });
    });
  }

  public handleAdd = () => {
    this.setState({
      visible: true,
      isEdit: false,
      itemData: {
        ...initItemData,
        type: this.props.location.pathname.split('/').slice(-1)[0] === 'actives' ? 2 : 1,
      },
    });
  };

  public handleCancel = () => {
    this.setState({
      visible: false,
    });
  };

  public handlerEdit = (item: any) => {
    this.setState({
      visible: true,
      itemData: { ...item },
      isEdit: true,
    });
  };

  public handlerDelete = (item: any) => {
    deletePosts(item).then(() => {
      this.getData(this);
    });
  };

  public render() {
    return (
      <div>
        <div>
          <Table
            columns={this.state.columns}
            dataSource={this.state.list}
            title={() => (
              <div>
                <p
                  style={{
                    fontSize: '32px',
                    margin: 0,
                    textAlign: 'center',
                    letterSpacing: '5px',
                  }}
                >
                  文章管理
                </p>
                <Button type="primary" onClick={this.handleAdd}>
                  添加文章
                </Button>
              </div>
            )}
          />
          <HomeForm
            visible={this.state.visible}
            handleCancel={this.handleCancel}
            title="添加文章"
            itemData={this.state.itemData}
            isEdit={this.state.isEdit}
            getData={() => {
              this.getData(this);
            }}
          />
        </div>
      </div>
    );
  }
}
